<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../index.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        canvas {
            margin: 50px auto 0;
            display: block;
            background: yellow;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="400" height="400">
    此浏览器不支持canvas
</canvas>
</body>
</html>
<script>
    const ctx = document.getElementById('canvas')
    const gl = ctx.getContext('webgl')

    const VERTEX_SHADER_SORUCE = `
    attribute vec4 aPosition;
    attribute vec4 aColor;
    varying vec4 vColor;
    uniform mat4 mat;
    void main(){
      gl_Position = mat * aPosition;
      vColor = aColor;
    }
  `;
    const FRAGEMNT_SHADER_SOURCE = `
    precision lowp float;
    varying vec4 vColor;
    void main(){
      gl_FragColor = vColor;
    }
  `;
    // 封装后
    const program = initShader(gl, VERTEX_SHADER_SORUCE, FRAGEMNT_SHADER_SOURCE)
    const aPosition = gl.getAttribLocation(program, 'aPosition')
    const aColor = gl.getAttribLocation(program, 'aColor')
    const mat = gl.getUniformLocation(program, 'mat')

    // 顶点
    const v0 = [1,1,1];
    const v1 = [-1,1,1]
    const v2 = [-1,-1,1]
    const v3 = [1,-1,1]
    const v4 = [1,-1,-1]
    const v5 = [1,1,-1]
    const v6 = [-1,1,-1]
    const v7 = [-1,-1,-1]
    // 顶点数据
    const points = new Float32Array([
        ...v0,...v1,...v2,...v0,...v2,...v3, // 前
        ...v0,...v3,...v4,...v0,...v4,...v5, // 右
        ...v0,...v5,...v6,...v0,...v6,...v1, // 上
        ...v1,...v6,...v7,...v1,...v7,...v2, // 左
        ...v7,...v4,...v3,...v7,...v3,...v2, // 底
        ...v4,...v7,...v6,...v4,...v6,...v5, // 后
    ])
    const buffer = gl.createBuffer();

    const BYTES = points.BYTES_PER_ELEMENT;

    gl.bindBuffer(gl.ARRAY_BUFFER, buffer)

    gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW)

    gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 0, 0)
    // 激活aPosition
    gl.enableVertexAttribArray(aPosition)

    const colorData = new Float32Array([
        1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,
        0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,
        0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,
        1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
        0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
        0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,
    ])
    const colorBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer)
    gl.bufferData(gl.ARRAY_BUFFER, colorData, gl.STATIC_DRAW)

    gl.vertexAttribPointer(aColor, 3, gl.FLOAT, false, 0, 0)
    // 激活aPosition
    gl.enableVertexAttribArray(aColor)


    let evex = 3
    let evey = 3
    let evez = 5

    let deg = 0
    function draw() {
        deg+=0.01;
        const rotate = getRotateMatrix(deg)
        const vm = getViewMatrix(evex,evey,evez,0.0,0.0,0.0,0.0,0.6,0.0)
        const perspective = getPerspective(30,ctx.width/ctx.height,100,1);
        gl.enable(gl.DEPTH_TEST);
        gl.uniformMatrix4fv(mat, false, mixMatrix(mixMatrix(perspective,vm),rotate))
        gl.drawArrays(gl.TRIANGLES, 0, points.length/3);
        requestAnimationFrame(draw)
    }

    draw()

    document.onkeydown=function (e) {
        switch (e.keyCode) {
            case 37: evex+=0.01; break;
            case 38: evex-=0.01; break;
            case 39: evey+=0.01; break;
            case 40: evey-=0.01; break;
        }
        draw()
    }

</script>
